import Dialog from ".";
import { Row, Col, Spin } from 'antd';
import { WeaTab, WeaSelect, WeaCheckbox, WeaLocaleProvider, WeaHelpfulTip } from 'ecCom';
import { observer } from "mobx-react";
const getLabel = WeaLocaleProvider.getLabel;

import './combineSetDialog.less';
@observer
export default class CombineSetDialog extends React.Component {
    render() {
        const { store } = this.props;
        const { form } = store;
        store.selTitle(getLabel(502643,"汇总设置"));
        getLabel(31129,'取消')
        let getLabelString = new Map([
            ['取消',  getLabel(31129,'取消')],
            ['保存', getLabel(30986,'保存')]
        ]);
        store.setButtons(getLabelString);
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@exgvre`}
                dialog={store}
                className="edc-combine-set-dialog"
            ><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ertiyy`} spining={store.loading}>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@3fdz6o`}
                    datas={store.forms.slice()}
                    keyParam="formid"
                    selectedKey={store.selectedForm}
                    onChange={store.changeSelectedForm}
                />
                {
                    store.forms.map(f => {
                        if (!form.has(f.formid)) {
                            return null;
                        }
                        const formField = form.$(f.formid);
                        const { tables = [] } = f;
                        //const dtdiff = `edc_uf_table${f.formid}_dt`;
                        const dtdiff = `${f.mainTableName}_dt`;
                        const detailTabs = tables.map(d => ({
                            key: d.detailTable,
                            //title: `${getLabel('502710', '明细') + d.detailTable.replace(dtdiff, '')}`
                            title: `${getLabel('502710', '明细') + d.detailTable.substr(d.detailTable.indexOf("_dt")+3)}`
                        }));
                        return (
                            <ul className="edc-combine-set" style={{ display: store.selectedForm === f.formid ? 'block' : 'none' }}>
                                <li>
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qko1yb@`}>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9ebwmq`} span={8}>
                                            {getLabel('502711', '字段')}
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hv8a4s@`} span={16}>
                                            {getLabel('502712', '汇总方式')}
                                        </Col>
                                    </Row>
                                </li>
                                {
                                    formField.map((field,index) => {
                                        if (field.key.startsWith(dtdiff)) {
                                            return null;
                                        }
                                        return (
                                            <li>
                                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nofsbf@${index}`}>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pldhay@${index}`} span={8}>
                                                        <span dangerouslySetInnerHTML={{ __html: field.label }}></span>
                                                    </Col>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2qqs3n@${index}`} span={16}>
                                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@sqdafl@${index}`}
                                                            style={{ width: 200 }}
                                                            {...field.bind()}
                                                            options={field.get('options')}
                                                        />
                                                    </Col>
                                                </Row>
                                            </li>
                                        )
                                    })
                                }
                                {
                                    tables.length > 0 && <li className="sub-table">
                                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@zrphsq`}
                                            datas={detailTabs}
                                            keyParam="key"
                                            type="card"
                                            selectedKey={store.selectedDetail}
                                            onChange={store.changeSelectedDetail}
                                        />
                                        {tables.map((table, index) => {
                                            if (!formField.has(table.detailTable)) {
                                                return null;
                                            }
                                            const detailField = formField.$(table.detailTable);
                                            const allField = detailField.$('allDetailFileds').bind().value;
                                            const { value } = detailField.$('combineType').bind();
                                            return (
                                                <div>

                                                    <ul style={{ display: store.selectedDetail == table.detailTable ? 'block' : 'none' }}>
                                                        <li>
                                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@s9n3so@${index}`}>
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0hap4k@${index}`} span={8}>
                                                                    {getLabel('511878','分组汇总')}
                                                                </Col>
                                                                {/* <Col span={8}>
                                                                    <WeaSelect
                                                                        {...detailField.$('combineType').bind()}
                                                                        options={[
                                                                            {
                                                                                key: "1",
                                                                                selected: true,
                                                                                showname: "明细行汇总"
                                                                            },
                                                                            {
                                                                                key: "0",
                                                                                selected: false,
                                                                                showname: "分组汇总"
                                                                            }
                                                                        ]}
                                                                        detailtype="3"
                                                                    />
                                                                </Col> */}
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8gtskn@${index}`} span={4}>
                                                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@fcccii@${index}`}
                                                                        {...detailField.$('combineType').bind()}
                                                                        display="switch"
                                                                    />
                                                                </Col>
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@y7ghlw@${index}`} span={12}>{value === '1' && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@4n4qt5@${index}`}
                                                                    {...detailField.$('groupField').bind()}
                                                                    options={[{ key: '-1', showname: "" }, ...allField]}
                                                                    detailtype="1"
                                                                    style={{ width: 150 }}
                                                                    helpfulTip={getLabel('511880','不选择分组字段，将汇总为一行')}
                                                                />}</Col>
                                                            </Row>
                                                        </li>
                                                        {value === '1' && detailField.map((field, index) => {
                                                            if (field.key === 'combineType' || field.key === 'groupField' || field.key === 'allDetailFileds') {
                                                                return null;
                                                            }
                                                            return (
                                                                <li>
                                                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1vgksa@${index}`}>
                                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yw9now@${index}`} span={8}>
                                                                            <span dangerouslySetInnerHTML={{ __html: field.label }}></span>
                                                                        </Col>
                                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4miiyp@${index}`} span={16}>
                                                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@27hwro@${index}`}
                                                                                style={{ width: 200 }}
                                                                                {...field.bind()}
                                                                                options={field.get('options')}
                                                                            />
                                                                        </Col>
                                                                    </Row>
                                                                </li>
                                                            )
                                                        })}
                                                    </ul>
                                                </div>
                                            )

                                        })}
                                    </li>
                                }
                            </ul>
                        )
                    })
                }
            </Spin>
            </Dialog>
        )
    }

}